<template>
  <el-drawer
    v-model="visible"
    title="生成航路"
    :size="740"
    class="route-gen-draw"
  >
    <el-form :inline="true" class="demo-form-inline">
      <el-row v-for="(item, index) in form" :key="index">
        <el-form-item label="起点名称">
          <el-select
            v-model="item.startId"
            placeholder="起点名称"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in pointList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="降落点名称">
          <el-col :span="18">
            <el-select
              v-model="item.endId"
              placeholder="降落点名称"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in pointList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="4" class="text-center">
            <el-button @click="handleDelete(index)">删除</el-button>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/api/route";

const props = defineProps({
  visible: Boolean,
});

const { visible } = toRefs(props);
const emits = defineEmits(["change"]);

const pointList = ref([]);
const form = reactive([
  {
    startId: "",
    endId: "",
  },
]);

watch(visible, (newValue, oldValue) => {
  if (newValue) {
    getPointList();
  }
});

const handleAdd = () => {
  form.push({
    startId: "",
    endId: "",
  });
};

const handleDelete = (index) => {
  form.splice(index, 1);
};

const handleClose = () => {
  pointList.value = [];
  form.splice(0, form.length, { startId: "", endId: "" });
  emits("change", "routeGenerate");
};

const handleConfirm = async () => {
  if (form.length === 0) {
    ElMessage.error("请至少添加一条航路！");
    return;
  }
  if (form.map((item) => item.startId === item.endId).includes(true)) {
    ElMessage.error("起点和降落点不能相同！");
    return;
  }
  // 再次确认
  try {
    await ElMessageBox.alert("是否进行路径规划?", "信息提示", {
      showCancelButton: true,
      cancelButtonText: "取消",
      confirmButtonText: "确认",
      customClass: "route-gen-confirm",
    });
    // 后续操作
    const result = await api.genRoute(form);
    if (result.code === 200) {
      ElMessage.success({
        message: result.msg,
        onClose: () => {
          emits("change", "routeGenerate", {
            params: form,
            grids: result.data || [],
          });
        },
      });
    } else {
      ElMessage.error(result.msg || "服务器忙，请稍后重试！");
    }
  } catch (e) {
    console.log("已取消");
  }
};

const getPointList = async () => {
  const result = await api.getPointList();
  if (result.code === 200) {
    pointList.value = result.data || [];
  } else {
    ElMessage.error(result.msg || "服务器忙，请稍后重试！");
  }
};
</script>

